<!DOCTYPE html>
<html>

  <head>
      <script>document.write('<base href="' + document.location + '" />');</script>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <title>PrimeNG - AVALON</title>
      
      <link rel="stylesheet" type="text/css" href="../theme/theme-blue.css">
      <link rel="stylesheet" type="text/css" href="../layout/css/layout-blue.css">
      <link rel="stylesheet" type="text/css" href="primeng.min.css">
  </head>
  
  <body class="landing-body">
      <div class="landing-wrapper">
        <div id="header">
            <div class="header-top">
                <img src="../layout/images/landing/logo-landing.svg" class="logo" />
                
                <ul class="landing-menu">
                    <li>
                        <a href="#home">Home</a>
                    </li>
                    <li>
                        <a href="#features">Features</a>
                    </li>
                    <li>
                        <a href="#statistics">Events</a>
                    </li>
                    <li>
                        <a href="#pricing">Pricing</a>
                    </li>
                    <li>
                        <a href="#video">Video</a>
                    </li>
                </ul>
                
                <div class="sign-up-buttonpane">
                    <button>Login</button>
                    <button>Register</button>
                </div>
            </div>
            
            <div class="header-content">
                <h1>PrimeNG Presents avalon</h1>
                <h2 style="line-height: 1.5">Minimal and elegant responsive application template with
                a premium look for PrimeNG components.</h2>
                <div>
                    <button class="section-button">Learn More</button>
                </div>
            </div>
        </div>
                    
        <div id="features">
            <div>
                <div class="ui-g features-content">
                    <div class="ui-g-12 ui-md-6 ui-lg-3">
                        <div class="feature-header">
                            <img src="../layout/images/landing/icon-responsivelayout.svg" />
                        </div>
                        <h3>Responsive Layout</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt dolore magna aliqua.</p>
                    </div>
                    <div class="ui-g-12 ui-md-6 ui-lg-3">
                        <div class="feature-header">
                            <img src="../layout/images/landing/icon-moderndesign.svg" />
                        </div>
                        <h3>Modern Design</h3>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                    <div class="ui-g-12 ui-md-6 ui-lg-3">
                        <div class="feature-header">
                            <img src="../layout/images/landing/icon-welldocumented.svg" />
                        </div>
                        <h3>Well Documented</h3>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    </div>
                    <div class="ui-g-12 ui-md-6 ui-lg-3">
                        <div class="feature-header">
                            <img src="../layout/images/landing/icon-cleancode.svg" />
                        </div>
                        <h3>Clean Code</h3>
                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="showcase-content-wrapper">
            <div class="showcase-content">
                <img src="../layout/images/landing/icon-introducing.svg" class="intro-logo"/>
                <h2>Introducing PrimeNG Avalon</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit neque, aliquam sed dolor eu, sagittis rutrum erat. Donec eu risus vitae tellus rhoncus iaculis.</p>
            </div>
            <img src="../layout/images/landing/image-discover.png" class="layout-image"/>
        </div>
        
        <div id="stats">
            <div>
                <div class="ui-g">
                    <div class="ui-g-12 ui-lg-4 stat-card">
                        <div class="component-content components">
                            <img src="../layout/images/landing/icon-ui.svg" />
                            <p>UI Components</p>
                            <p>100+</p>
                        </div>
                    </div>
                    <div class="ui-g-12 ui-lg-4 stat-card">
                        <div class="component-content development">
                            <img src="../layout/images/landing/icon-hours.svg" />
                            <p>Hours of Development</p>
                            <p>425</p>
                        </div>
                    </div>
                    <div class="ui-g-12 ui-lg-4 stat-card">
                        <div class="component-content consumed">
                            <img src="../layout/images/landing/icon-coffee.svg" />
                            <p>Cups of Coffee Consumed</p>
                            <p>129</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="pricing">
            <div>
                <div class="ui-g">
                    <div class="ui-g-12 ui-lg-4">
                        <div class="price-type">
                            <div class="price-header">
                                <h3>Beginner</h3>
                                <span class="price-for">For starters and side projects</span>
                                <p>$10 / per year</p>
                            </div>
                            <div class="price-content">
                                <ul>
                                    <li><i class="fa fa-circle" aria-hidden="true"></i><span>Responsive</span></li>
                                    <li><i class="fa fa-circle" aria-hidden="true"></i><span>Push Messages</span></li>
                                </ul>
                            </div>
                            <div class="price-footer">
                                <button class="section-button">Get Started</button>
                            </div>
                        </div>
                    </div>
                    <div class="ui-g-12 ui-lg-4">
                        <div class="price-type">
                            <div class="price-header">
                                <h3>For best professionals</h3>
                                <span class="price-for">For starters and side projects</span>
                                <p>$25 / per year</p>
                            </div>
                            <div class="price-content">
                                <ul>
                                    <li><i class="fa fa-circle" aria-hidden="true"></i><span>Responsive</span></li>
                                    <li><i class="fa fa-circle" aria-hidden="true"></i><span>Push Messages</span></li>
                                    <li><i class="fa fa-circle" aria-hidden="true"></i><span>7/24 Support</span></li>
                                </ul>
                            </div>
                            <div class="price-footer">
                                <button class="section-button">Get Started</button>
                            </div>
                        </div>
                    </div>
                    <div class="ui-g-12 ui-lg-4">
                        <div class="price-type">
                            <div class="price-header">
                                <h3>For serious companies</h3>
                                <span class="price-for">For starters and side projects</span>
                                <p>Get a quote</p>
                            </div>
                            <div class="price-content">
                                <ul>
                                    <li><i class="fa fa-circle" aria-hidden="true"></i><span>Responsive</span></li>
                                    <li><i class="fa fa-circle" aria-hidden="true"></i><span>Push Messages</span></li>
                                    <li><i class="fa fa-circle" aria-hidden="true"></i><span>7/24 High Priority Support</span></li>
                                    <li><i class="fa fa-circle" aria-hidden="true"></i><span>Free Shipping</span></li>
                                </ul>
                            </div>
                            <div class="price-footer">
                                <button class="section-button">Get a Quote</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="video">
           <div class="ui-g">
               <div class="ui-g-12 ui-md-6 video-container">
                   <iframe width="560" height="315" src="https://www.youtube.com/embed/T6N_Km8UDc4" frameborder="0" allowfullscreen="true"></iframe>
               </div>
               <div class="ui-g-12 ui-md-6 video-content">
                   <img src="../layout/images/landing/icon-video.svg" styleClass="intro-logo"/>
                   <h2>Introducing PrimeNG Avalon</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit neque, aliquam sed dolor eu, sagittis rutrum erat.</p>
                   <button class="section-button">Learn More</button>
               </div>
           </div>
       </div>
        
       <div id="footer">
           <div class="ui-g">
               <div class="ui-g-12 ui-md-6">
                   <img src="../layout/images/landing/avalon.png"/>
               </div>
               <div class="ui-g-12 ui-md-6">
                   <ul class="landing-menu">
                       <div class="ui-g">
                           <div class="ui-g-12 ui-md-6" style="text-align:center">
                               <li>
                                   <a href="#home">Home</a>
                               </li>
                               <li>
                                   <a href="#features">Features</a>
                               </li>
                               <li>
                                   <a href="#statistics">Events</a>
                               </li>
                           </div>
                           <div class="ui-g-12 ui-md-6" style="text-align:center">
                               <li>
                                   <a href="#pricing">Pricing</a>
                               </li>
                               <li>
                                   <a href="#video">Video</a>
                               </li>
                           </div>
                       </div>
                   </ul>
               </div>
           </div>
       </div>
    </div>
  </body>
</html>